<template>
  <div>
    <el-card  class="chatBox" :body-style="{ padding: '0px' }">
      <Room
        :user="user"
        :userList="userList"
        ref="room"
        @sendServer="sendServer"
        @handleFile="handleFile"
        @activeSid="activeSid"
      />
    </el-card>
  </div>
</template>

<script>
import Room from "./ChatRoom";
import {
  Message
} from 'element-ui';
export default {
  components: { Room },
  data() {
    return {
      username: "",
      avatar: "",
      uid: null,//当前用户id
      isEnter: false,
      socket: null,
      user: {},
      userList: [],
      sid: null,//发送目标id
      session:null
    };
  },
  created() {
    let userInfo = window.sessionStorage.getItem("userInfo");
    userInfo = JSON.parse(userInfo);
    this.avatar = userInfo.avatar;
    this.username = userInfo.username;
    this.uid = userInfo.uid;
    
  },
  mounted() {
        let that =this;
        let room = this.$refs.room;
        //创建webSocket 对象
        let ws = new WebSocket("ws://124.70.41.29:8080/chat/"+this.uid);
        //给 ws 绑定事件
        this.session = ws;
        ws.onopen = function(){
          Message.success("聊天室登录成功");
        };
        ws.onmessage = function (evt){
          let obj = JSON.parse(evt.data)
          console.log(obj);
          let event = obj.event;
          console.log("事件"+event);
          if(event==="addUser"){
            console.log("触发事件"+event);
            //console.log(room)
            let parse=new FormData();
            parse.append("uids",obj.message)
            
            that.$http.post('/getAllUsers',parse).then(res=>{

            // console.log(res.data);
            room.haveOneJoinRoom(res.data)
          })
            
          }
          else if(event=="oneMessage"){
            console.log("触发事件"+event);
            console.log(obj);

            room.handleOne(obj)
          }else if(event=="deleteUser"){
            let parse=new FormData();
            parse.append("uids",obj.message)
            console.log("触发事件"+event);
            that.$http.post('/getAllUsers',parse).then(res=>{

              // console.log(res.data);
              room.haveOneleaveRoom(res.data)
              })
          }
        };
        ws.onclose = function (){
          this.session.close();
        };
    // /**
    //  * 聊天室的主要功能
    //  */
    // // 连接服务器
    // this.socket = io(this.$apiServer);
    // // 监听登录失败的请求
    // this.socket.on("userExit", (data) => this.$message.error(data.msg));
    // // 监听登录成功的请求
    // this.socket.on("loginSuccess", (data) => {
    //   this.$message.success(data.msg);
    //   this.user = data;
    //   this.isEnter = true;
    // });
    // this.socket.on("addUser", (data) => {
    //   this.$store.commit("setJoinRoom", data);
    //   this.$refs.chatroom ? this.$refs.chatroom.haveOneJoinRoom() : null;
    // });
    // this.socket.on("leaveroom", (data) => {
    //   this.$store.commit("setLeaveRoom", data);
    //   this.$refs.chatroom ? this.$refs.chatroom.haveOneleaveRoom() : null;
    // });
    // // 监听用户列表的信息
    // this.socket.on("userList", (data) => {
    //   this.userList = data;
    // });
    // // 监听聊天的消息
    // this.socket.on("receiveMessage", (data) => {
    //   // 把接收到的消息显示到聊天窗口中
    //   this.$refs.chatroom.handleGroup(data);
    // });
    // // 监听图片的消息
    // this.socket.on("receiveImage", (data) => {
    //   // 把接收到的图片显示到聊天窗口中
    //   this.$refs.chatroom.handleGroup(data);
    // });
    // // 一对一单聊消息
    // this.socket.on("oneMsg", (data) => {
    //   // 把接收到的消息显示到聊天窗口中
    //   this.$refs.chatroom.handleOne(data);
    // });
    // // 一对一单聊图片
    // this.socket.on("oneImg", (data) => {
    //   // 把接收到的图片显示到聊天窗口中
    //   this.$refs.chatroom.handleOne(data);
    // });
  },
  updated(){
    
  },
  destroyed() {
    if(this.session) this.session.close();
    // if (this.socket) this.socket.disconnect();
  },
  methods: {
    // loginChat() {
    //   this.isEnter=true
    // },
    activeSid(sid) {
      this.sid = sid;
    },
    handleFile(file, isGroup) {
      // const { username, avatar, sid } = this.user;
      // const tosid = this.sid;
      // if (isGroup) {
      //   this.socket.emit("sendImage", { username, avatar, file });
      // } else {
      //   this.socket.emit("oneImage", { username, avatar, file, tosid, sid });
      // }
    },
    sendServer(msg, isGroup) {
      let session = this.session;
      let sendMsg = null;
        
      if(!isGroup){
        sendMsg={
          isGroup:"0",
          to:this.sid,
          from:this.uid,
          message:msg,
          event:"oneMessage"
        }
      }
      sendMsg=JSON.stringify(sendMsg)
      console.log("发送消息"+msg)
      session.send(sendMsg)
      // const { username, avatar, sid } = this.user;
      // const tosid = this.sid;
      // if (isGroup) {
      //   this.socket.emit("sendMessage", { username, avatar, msg: content });
      // } else {
      //   this.socket.emit("oneMessage", {
      //     username,
      //     avatar,
      //     sid,
      //     tosid,
      //     msg: content,
      //   });
      // }
    },
  },
};
</script>

<style lang="less" scoped>
.chatBox {
  position: relative;
  width: 900px;
  height: 550px;
  margin: 0 auto;
  margin-top: 40px;
  border: none;
}
.loginChat {
  width: 900px;
  height: 550px;
  background-image: linear-gradient(
    to right top,
    #a98fb3,
    #a08fb9,
    #9490bd,
    #8691c1,
    #7593c4
  );
  img {
    width: 180px;
    height: 180px;
    top: 110px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  span {
    position: absolute;
    display: block;
    left: 50%;
    transform: translateX(-50%);
    font-size: 34px;
    top: 300px;
    color: yellow;
  }
  button {
    width: 135px;
    height: 47px;
    font-size: 20px;
    top: 410px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background-color: rgb(157, 82, 226);
    cursor: pointer;
    border: none;
    border-radius: 50px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  }
}
</style>